<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--bootstrap插件-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
	<!--字体插件-->
	<link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
	<!--ztree-->
	<link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
	<!--common-->
	<link href="/static/css/common.css" rel="stylesheet"/>
	<!--帮助手册样式-->
	<link rel="stylesheet" type="text/css" href="/static/css/help/document.css"/>
	<!--代码高亮-->
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shThemeDefault.css"/>
	<title>Grid数据表格</title>

<script>

</script>
</head>

<body style="padding:5px 10px; box-sizing:border-box; background-color:white;">
<a href="#" target="_blank" class="showAtTop">显示单页</a>
<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>&nbsp;&nbsp;&nbsp;&nbsp;Grid数据表格
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<p>
				JO提供的数据表格插件，对常规table标签的增强。实现了通过URL动态加载数据，数据排序，多/单选等常用功能；并带有多种回掉函数用于自定义操作。
			</p>
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2"><i class="fa fa-caret-down"> </i>table的属性</td>
	</tr>

	<tr>
		<td><attr><string/>data</attr></td>
		<td>表格数据<br/>可直接在table标签上使用此属性，值为对象数组；（不推荐使用此方式）</td>
	</tr>
	<tr>
		<td><attr><string/>titleCss</attr></td>
		<td>标题行样式,指定表头使用哪个样式<br/>可直接在table标签上使用此属性</td>
	</tr>
	<tr>
		<td><attr><string/>trClick</attr></td>
		<td>行点击事件方法名
			<br/>可直接在table标签上使用此属性
			<br/>参数1：被点击行数据对象
			<br/>参数2：所有的数据（对象数组）
			<br/>参数3：被点击行的索引值(不带标题行，从0开始)
		</td>
	</tr>
	<tr>
		<td><attr><string/>noHead</attr></td>
		<td>不显示标题行，为true时将不显示表头<br/>可直接在table标签上使用此属性</td>
	</tr>
	<tr>
		<td><attr><obj/>trHandle</attr></td>
		<td>行处理函数名,生成表格行之前的行对象处理,参数1为行数据对象,参数2为在数据中的位置索引
			<br/>可直接在table标签上使用此属性
			<br/>参数1：当前处理行数据对象
			<br/>参数3：当前处理行的索引值(不带标题行，从0开始)
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2"><i class="fa fa-caret-down"> </i>col的属性</td>
	</tr>

	<tr>
		<td><attr><string/>type</attr></td>
		<td>
			列类型（非必填），默认为normal,多选框:checkbox,单选框:radio
		</td>
	</tr>
	<tr>
		<td><attr><string/>field</attr></td>
		<td>该列显示的字段
			<br/>1.可以是字段名，比如：field="name"
			<br/>2.可以是字段表达式，比如：field="姓名：{name}性别：{sex}"，用花括号将字段括住
			<br/>3.可以是函数表达式，比如：field="[=jo.formatDate('{createTime}')]"，表示当前列的值为jo.formatDate函数返回结果
			<br/>4.还可以是一个虚拟的字段（即数据中不存在的字段），例如：field="_opt"，如果什么都不做，那么这一列就是空（因为数据中没有此字段），我们可以在行处理函数（trHandle）中给当前行对象赋值一个_opt；比如数据行最后一列放按钮就需要在行处理中拼出按钮的html
		</td>
	</tr>
	<tr>
		<td><attr><string/>title</attr></td>
		<td>该列的标题文案</td>
	</tr>
	<tr>
		<td><attr><string/>width</attr></td>
		<td>该列宽度
			<br/>1.可以是指定宽度，例如：100px
			<br/>2.也可以是百分比，例如：15%
		</td>
	</tr>

	<tr>
		<td><attr><string/>align</attr></td>
		<td>该列内容的位置
			<br/>1.默认为left（居左）
			<br/>2.可以是水平居中：center
			<br/>3.也可以居右：right
		</td>
	</tr>
	<tr>
		<td><attr><string/>headAlign</attr></td>
		<td>该列标题的位置，默认和align属性一致
			<br/>1.可以是居左：left
			<br/>2.可以是水平居中：center
			<br/>3.也可以居右：right
		</td>
	</tr>
	<tr>
		<td><attr><string/>order</attr></td>
		<td>列排序标记
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>方法
		</td>
	</tr>
	<tr>
		<td><func><obj/>Grid(id)</func></td>
		<td>构造Grid对象，参数为表格id<br/>返回Grid对象</td>
	</tr>
	<tr>
		<td><func><void/>grid.loadData(dataOrUrl)</func></td>
		<td>加载数据，参数为对象数组，或者为url（Grid对象会自动去请求该url获取数据并加载）</td>
	</tr>
	<tr>
		<td><func><void/>grid.clearData()</func></td>
		<td>清空数据</td>
	</tr>
</table>
<!--demo-->
<div class="eg">
	<table class="table table-bordered table-hover" id="mainList1" dataUrl="{URL_UMS}ums/dept/getPage" trClick="itemClick" trHandle="itemHandle">
		<col field="id" type="checkbox" width="5%" align="center" headAlign="center"/>
		<col field="name" type="radio" title="单选框" width="5%" align=""/>
		<col field="{code}" title="编码" width="15%" align="" event="click" />
		<col field="name" title="机构名称" width="20%" align=""  />
		<col field="wholeName" title="NAME全路径" width="30%" align=""  />
		<col field="typeName" title="类型" width="10%" align=""  />
		<col field="[=jo.formatDate('{createTime}')]" title="创建时间" width="10%" align=""  order="createTime"/>
		<col field="opt" title="操作" width="15%" align=""/>
	</table>
	在你想要放表格的地方写入对应html代码：
	<pre name="code" class="brush:html;toolbar:false;">
        &lt;table class="table table-bordered table-hover" id="mainList" dataUrl="{URL_UMS}ums/dept/getPage" trClick="itemClick" trHandle="itemHandle">
			&lt;col field="id" type="checkbox" width="5%" align=""/>
			&lt;col field="name" type="radio" title="单选框" width="5%" align=""/>
			&lt;col field="{code}" title="编码" width="15%" align="" event="click" />
			&lt;col field="name" title="机构名称" width="20%" align=""  />
			&lt;col field="wholeName" title="NAME全路径" width="30%" align=""  />
			&lt;col field="typeName" title="类型" width="10%" align=""  />
			&lt;col field="[=jo.formatDate('{createTime}')]" title="创建时间" width="10%" align=""  order="createTime"/>
			&lt;col field="opt" title="操作" width="15%" align=""/>
		&lt;/table></pre>
	初始化表格：
	<pre name="code" class="brush:js;toolbar:false;">
		$(function(){
			Grid('mainList').loadData();
		});
		//行点击
		function itemClick(item, list, idx){
			alert("我被点击了--"+idx);
		}
		//行处理
		function itemHandle(item, idx){
			item.type = item.type == 'COMPANY' ? '<font color="red">单位</font>'  : '部门';//在行处理函数中对type字段进行赋值
			item.opt = '&lt;button type="button" class="btn btn-danger" onclick="alert(\'删除'+item.name+'\')"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除&lt;/button>';
		}</pre>
</div>

</body>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--帮助手册js-->
<script src="/static/js/help/document.js"></script>
<!--代码高亮-->
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shCore.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script class="javascript">
	highLight();
</script>
<script type="text/javascript">
	$(function(){
		Grid('mainList1').loadData();
	});
	//行点击
	function itemClick(item, list, idx){
		alert("我被点击了--"+idx);
	}
	//行处理
	function itemHandle(item, idx){
		item.typeName = item.type == 'COMPANY' ? '<font color="red">单位</font>'  : '部门';//在行处理函数中对typeName字段进行赋值
		item.opt = '<button type="button" class="btn btn-danger" onclick="alert(\'删除'+item.name+'\')"><i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除</button>';
	}
</script>
</html>
